<!-- /*
 * @Author: 俞明月
 * @Date:   2022-01-30
 * @Last Modified by:   俞明月
 * @Last Modified time: 2022-01-30
 */ -->
<template>
	<div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @touchstart.stop @click="handleHistory">
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">店员聊天</div>
        </div>
        <div class="ui-mode-content flex1" ref="scrollPage" v-if="pageStatus">
            <div class="relative" v-if="user_service_list&&user_service_list.length">
                <div class="mt-flex-inner mt-service-inner">
                    <div class="ui-mode-box-sum"
                        @click="selectService(item)"
                        :key="`service-${i}`"
                        v-for="(item,i) in user_service_list"
                    >
                        <div class="ui-mode-box-top">
                            <img :src="item.weichat_img" class="ui-mode-box-img">
                            <div class="ui-mode-box-float ui-mode-box-font">
                                {{item.weichat_name}}
                                <div class="ui-mode-float">{{item.time_register}}</div>
                            </div>
                        </div>
                        <div class="ui-mode-box-text">
                            <div class="ui-mode-text ui-mode-sun"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
export default {
    name: 'my/chat',
    data() {
        return {
            public_agent_info:{},
            user_service_list:[]
        }
    },
    mixins:[
        mixinCommon,
        mixinRequest,
    ],
    computed:{
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init);
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        // 初始化
        init(){
            this.getPageInfo({
                name:'my.chat.service',
                param:{
                    invoke_method:'public_page_4m_load_user_list',
                    user_type_in: '111,112',
                    id_public_agent_info:99101,
                    pre_db_para_begin_idx:0,
                    pre_db_para_length_4_list:100
                },
                loading:{
                    enabled:true
                }
            }).then(({result,response})=>{
                console.log(result)
                this.public_agent_info=result.public_agent_info||{};
                document.title=this.public_agent_info.application_name;
                this.user_service_list=result.page_content;
            }).catch(({msg})=>{
                this.showMessage(msg);
            });
        },
        selectService(item){
            this.$router.push({
                path:'/my/chat/detail',
                query:{
                    serviceId:item.id_public_user_info,
                    serviceName:item.nick_name,
                }
            });
        }
    },
    components:{
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.ui-mode-box-sum {
    width: 100%;
    .ui-mode-box-top {
        box-sizing: content-box;
        padding: 0 0.8rem;
        padding-top: 0.4rem;
        margin-top: 0;
        width: 90%;
        height: 1.3rem;
        position: relative;
        .ui-mode-box-img {
            float:left;
            height: 1.6rem;
            border-radius: 0.8rem;
            position: absolute;
            top: 0.8rem;
        }
        .ui-mode-box-font {
            float:left;
            margin-left: 2.2rem;
            height: 1.2rem;
            font-size: 0.746rem;
        }
    }
    .ui-mode-text {
        box-sizing: content-box;
        height:.7rem;
        font-size: 0.64rem;
        margin-left: 2.7rem;
        line-height: 1rem;
        border-bottom: 1px solid #ccc;
        padding-bottom: 0.8rem;
        padding-right: 0.8rem;
    }
    .ui-mode-sun {
        margin-left: 2.9rem;
        font-size: 0.46rem;
        color: #6e6f72;
        margin-top: 0.2rem;
    }
    .ui-mode-float {
        float: right;
        position: absolute;
        right: 5px;
        top: 8px;
        color: #6e6f72;
    }
}
</style>
